<template>
<div class="app-container">
   <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="待办任务" name="first">
     <todo-vehicle v-if="activeName == 'first'"></todo-vehicle>
    </el-tab-pane >
    <el-tab-pane label="已办任务" name="second">
      <finished-vehicle v-if="activeName == 'second'"></finished-vehicle>

    </el-tab-pane>
    <el-tab-pane  v-if="checkPermi(['workflow:vehicle:manage'])" label="车辆使用管理" name="third">
      <over-time-vehicle v-if="activeName == 'third'"></over-time-vehicle>

    </el-tab-pane>
  </el-tabs>

</div>

</template>

<script>
import finishedVehicle from './components/finishedVehicle.vue';
import todoVehicle from './components/todoVehicle.vue';
import overTimeVehicle from './components/overTimeVehicle.vue'



export default {
  name:'Vehicle',
  components:{
    todoVehicle,
    finishedVehicle,
    overTimeVehicle
  },
  data(){
    return{
      activeName:'first'
    }
  },
  methods:{
    
     handleClick(tab, event) {
      this.activeName = tab.name
      }
  }

}
</script>

<style>

</style>
